<template>
    <div class="soul-white-box">
        <h3 class="soul-box-title">{{art.title}}</h3>
        <p :id="art.id" v-html="art.text" class="soul-box-content"></p>
        <div class="read-more" :id="art.id+'read-more'"></div>
    </div>
</template>
<script>
    export default{
        props: ['art'],
        methods: {
            toggle(id, readMoreId){
                $(function () {
                    if($(id).find("video").length != 0){
                        return;
                    }
                    var slideHeight = 80; // px
                    var defHeight = $(id).height();
                    if (defHeight > slideHeight) {
                        $(id).css('height', slideHeight + 'px');
                        $(readMoreId).append('<a href="javascript:;">点击查看更多。。</a>');
                        $(readMoreId).find('a').click(function () {
                            let content = $(readMoreId).find('a').html();
                            if (content == '点击查看更多。。') {
                                $(id).animate({
                                    height: defHeight
                                }, "normal");
                                $(readMoreId).find('a').html('点击隐藏');
                            } else {
                                $(id).animate({
                                    height: slideHeight
                                }, "normal");
                                $(readMoreId).find('a').html('点击查看更多。。');
                                return false;
                            }
                        });
                    }
                });
            }
        },
        updated(){
            let id = '#' + this.art.id;
            let readMoreId = '#' + this.art.id + 'read-more';
            $(id).css('height', '100%');
            let readMoreIds = $(readMoreId).find('a');
            if (readMoreIds != undefined && readMoreIds.length != 0){
                readMoreIds[0].remove();
            }
            this.toggle(id, readMoreId);
        },
        mounted(){
            let id = '#' + this.art.id;
            let readMoreId = '#' + this.art.id + 'read-more';
            this.toggle(id, readMoreId);
        }
    }
</script>
<style>
    .soul-white-box {
        width: 100%;
        background: #fff;
        margin-bottom: 1rem;
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 4px;
        border: 1px solid #ededed;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    .soul-box-title {
        font-size: 1.2rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid #ededed;
        position: relative;
    }

    .soul-box-content {
        font-size: 1rem;
        padding-bottom: 1rem;
        color: black;
        position: relative;
        line-height: 1rem;
        overflow: hidden;
        word-break: break-all; /*支持IE，chrome，FF不支持*/
        word-wrap: break-word; /*支持IE，chrome，FF*/
    }

    .read-more {
        margin-top: 1rem;
    }
</style>